<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <style>
        .img_collection_list_fivetyone {
            display: flex;
            /* flex-wrap: wrap;  */
        }

        .img_collection_list_fivetyone li {
            width: 33.3%;
            padding: 25px;
            overflow: hidden;
            transition: box-shadow 0.3s;
            box-sizing: border-box;
            display: block;
            margin-right: 40px;
        }

        .img_collection_list_fivetyone li {
            box-shadow: 0 0 22px rgb(0 0 0 / 10%);
        }

        .img_collection_list_fivetyone_img {
            position: relative;
        }

        li .img_collection_list_fivetyone_img .img_collection_list_fivetyone_img_one {
            width: 100%;
            height: 405px;
            transition: transform 0.3s;
            object-fit: cover;
        }

        .img_collection_list_fivetyone li p {
            margin-top: 20px;
            text-align: center;
            transition: color 0.3s;
            content: '\F1111';
            font-size: var(--f_text);
            color: var(--c_text);
            line-height: var(--l_text);

        }

        .img_collection_list_fivetyone li:hover p {
            color: var(--c_theme);
        }

        .img_collection_list_fivetyone_box {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 35px;
            background-color: rgba(0, 0, 0, .5);
        }

        .img_collection_list_fivetyone_box span {
            color: #fff;
            font-size: 12px;
            line-height: 16px;
            padding-left: 5px;
        }

        .img_collection_list_fivetyone_box img {
            width: 16px;
            height: 14px;
        }

        @media (max-width:1240px) {
            .img_collection_list_fivetyone li {
                width: 100%;
            }
        }

        @media (max-width:768px) {
            .img_collection_list_fivetyone {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
            }

            .img_collection_list_fivetyone li {
                margin: auto;
            }

            .img_collection_list_fivetyone_img .img_collection_list_fivetyone_img_one {
                width: 100%;
                height: 300px;
            }
        }

        @media (max-width:500px) {
            .img_collection_list_fivetyone_img .img_collection_list_fivetyone_img_one {
                height: 200px;
            }
        }

        /* 遮罩层 */
        .masks {
            position: fixed;
            top: 0;
            right: 0;
            background: rgba(0, 0, 0, .8);
            width: 100%;
            height: 100%;
            z-index: 5;
            display: none;
        }

        .masks img {
            display: inline-block;
            width: 50px;
            height: 50px;
            position: fixed;
            top: 20px;
            right: 40px;
            cursor: pointer;
            z-index: 999;
        }

        /* swiper滑动轮播 */
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            margin: 0;
            padding: 0;
            /* background-color: black; */
        }

        .ddd,
        .eee,
        .fff {
            width: 100%;
            position: fixed;
            margin: auto !important;
            z-index: 55;
            top: 0;
            transform: translateY(50%);

        }

        .swiper-container {
            margin: auto !important;
            z-index: 55;
        }

        .gallery-thumbs,
        .gallery-thumbs_one,
        .gallery-thumbs_two {
            /* height: 20%; */
            box-sizing: border-box;
            padding: 10px 0;
            margin: auto;
            width: 500px;
            z-index: 55;
        }

        .gallery-thumbs .swiper-slide_one,
        .gallery-thumbs_one .swiper-slide_one,
        .gallery-thumbs_two .swiper-slide_one {
            width: 121px !important;
            /*height: 100%; */
            display: flex;
            padding-left: 20px !important;
            margin: auto 15px !important;
            opacity: 1;
            z-index: 55;
        }

        .gallery-thumbs .swiper-slide-thumb-active,
        .gallery-thumbs_one .swiper-slide-thumb-active,
        .gallery-thumbs_two .swiper-slide-thumb-active {
            opacity: 1;
            z-index: 55;
        }

        .img_collection_list_fivetyone_img_one {
            width: 460px;
            height: 340px;
            display: block;
            margin: auto;
            z-index: 55;
        }

        .img_collection_list_fivetyone_img_two {
            width: 121PX;
            height: 81px;
            display: block;
            margin: auto;
            z-index: 55;
        }

        .swiper-slide {
            width: 100% !important;

        }

        .swiper-wrapper {
            margin: auto;
        }

        @media (max-width:768px) {

            .gallery-thumbs,
            .gallery-thumbs_one,
            .gallery-thumbs_two {
                width: 90%;
            }

            .img_collection_list_fivetyone_img_one {
                margin: 0;
                width: 100%;
            }

            .swiper-slide {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <!-- 工艺雕塑第五套 3-1 -->
    <div class="img_collection title_center modular">
        <div class="public_width">
            <div class="public_title ">
                <h2>活动策划</h2>
                <p>Event planning</p>
            </div>

            <ul class="img_collection_list_fivetyone">
                <li class="public_finger">
                    <div class="img_collection_list_fivetyone_img">
                        <img src="../images/img_collection_1.webp" alt="" class="img_collection_list_fivetyone_img_one">
                        <div class="img_collection_list_fivetyone_box">
                            <span>2</span>
                            <img src="../images/img_collection51.png" alt="">
                        </div>
                    </div>
                    <p>
                        某某团体全国巡演
                    </p>
                </li>
                <li class="public_finger">
                    <div class="img_collection_list_fivetyone_img">
                        <img src="../images/img_collection_2.webp" alt="" class="img_collection_list_fivetyone_img_one">
                        <div class="img_collection_list_fivetyone_box">
                            <span>3</span>
                            <img src="../images/img_collection51.png" alt="">
                        </div>
                    </div>
                    <p>
                        某某团体全国巡演
                    </p>

                </li>
                <li class="public_finger">
                    <div class="img_collection_list_fivetyone_img">
                        <img src="../images/img_collection_3.webp" alt="" class="img_collection_list_fivetyone_img_one">
                        <div class="img_collection_list_fivetyone_box">
                            <span>2</span>
                            <img src="../images/img_collection51.png" alt="">
                        </div>
                    </div>
                    <p>
                        某某团体全国巡演
                    </p>
                </li>
                <!-- 遮罩层 -->
                <div class="masks">
                    <img src="../images/pubilc_close.png" alt="">
                </div>
            </ul>
        </div>
    </div>
    <!-- Swiper -->
    <div class="ddd">
        <div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../images/img_collection_1.webp" alt=""
                        class="img_collection_list_fivetyone_img_one"></div>
                <div class="swiper-slide"><img src="../images/img_collection_2.webp" alt=""
                        class="img_collection_list_fivetyone_img_one"></div>
                <div class="swiper-slide"><img src="../images/img_collection_3.webp" alt=""
                        class="img_collection_list_fivetyone_img_one"></div>
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next swiper-button-white"></div>
            <div class="swiper-button-prev swiper-button-white"></div>
        </div>
        <div class="swiper-container gallery-thumbs row">
            <div class=" swiper-wrapper swiper-wrapper_one">
                <div class="swiper-slide swiper-slide_one">
                    <img src="../images/img_collection_1.webp" alt="" class="img_collection_list_fivetyone_img_two">
                </div>
                <div class="swiper-slide swiper-slide_one"> <img src="../images/img_collection_2.webp" alt=""
                        class="img_collection_list_fivetyone_img_two">
                </div>
                <div class="swiper-slide swiper-slide_one"> <img src="../images/img_collection_3.webp" alt=""
                        class="img_collection_list_fivetyone_img_two">
                </div>
            </div>
        </div>
    </div>

    <div class="eee">
        <div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../images/img_collection_1.webp" alt=""
                        class="img_collection_list_fivetyone_img_one"></div>
                <div class="swiper-slide"><img src="../images/img_collection_2.webp" alt=""
                        class="img_collection_list_fivetyone_img_one"></div>
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next swiper-button-white"></div>
            <div class="swiper-button-prev swiper-button-white"></div>
        </div>
        <div class="swiper-container gallery-thumbs_one row">
            <div class=" swiper-wrapper swiper-wrapper_one">
                <div class="swiper-slide swiper-slide_one">
                    <img src="../images/img_collection_1.webp" alt="" class="img_collection_list_fivetyone_img_two">
                </div>
                <div class="swiper-slide swiper-slide_one"> <img src="../images/img_collection_2.webp" alt=""
                        class="img_collection_list_fivetyone_img_two">
                </div>
            </div>
        </div>
    </div>


    <div class="fff">
        <div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../images/img_collection_1.webp" alt=""
                        class="img_collection_list_fivetyone_img_one"></div>
                <div class="swiper-slide"><img src="../images/img_collection_2.webp" alt=""
                        class="img_collection_list_fivetyone_img_one"></div>
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next swiper-button-white"></div>
            <div class="swiper-button-prev swiper-button-white"></div>
        </div>
        <div class="swiper-container gallery-thumbs_two row">
            <div class=" swiper-wrapper swiper-wrapper_one">
                <div class="swiper-slide swiper-slide_one">
                    <img src="../images/img_collection_1.webp" alt="" class="img_collection_list_fivetyone_img_two">
                </div>
                <div class="swiper-slide swiper-slide_one"> <img src="../images/img_collection_2.webp" alt=""
                        class="img_collection_list_fivetyone_img_two">
                </div>
            </div>
        </div>
    </div>


    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/swiper-bundle.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10, //缩略图之间的空隙
            slidesPerView: 3, //显示的图片个数
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
        });
        var galleryTop = new Swiper('.gallery-top', {
            // spaceBetween: 1,
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            thumbs: {
                swiper: galleryThumbs
            }
        });
        $('.ddd').hide()
    </script>
    <script>
        var galleryThumbs_one = new Swiper('.gallery-thumbs_one', {
            spaceBetween: 10, //缩略图之间的空隙
            slidesPerView: 3, //显示的图片个数
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
        });
        var galleryTop = new Swiper('.gallery-top', {
            // spaceBetween: 1,
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            thumbs: {
                swiper: galleryThumbs_one
            }
        });
        $('.eee').hide()
    </script>
    <script>
        var galleryThumbs_two = new Swiper('.gallery-thumbs_two', {
            spaceBetween: 10, //缩略图之间的空隙
            slidesPerView: 3, //显示的图片个数
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
        });
        var galleryTop = new Swiper('.gallery-top', {
            // spaceBetween: 1,
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            thumbs: {
                swiper: galleryThumbs_two
            }
        });
        $('.fff').hide()
    </script>
    <script>
        $(function () {
            $('.img_collection_list_fivetyone li:nth-child(2)').click(function () {
                $('.masks').toggle()
                $('.ddd').toggle()
            })
            $('.img_collection_list_fivetyone li:nth-child(1)').click(function () {
                $('.masks').toggle()
                $('.eee').toggle()
            })
            $('.img_collection_list_fivetyone li:nth-child(3)').click(function () {
                $('.masks').toggle()
                $('.fff').toggle()
            })
            $('.masks img').click(function () {
                $('.ddd ').hide()
                $('.eee ').hide()
                $('.fff ').hide()
                $('.masks').toggle()
            })
            
        })
    </script>
</body>

</html>